<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <li v-for="(index,item) in goods">
            商品ID:{{index.id}}-
            商品名称：{{index.name}}-
            商品价格: {{index.price}}-
            商品数量:
            <button @click="reduce(index)">-</button>
            {{index.count}}
            <button @click="add(index)">+</button>-
            小计：{{index.subtotal}}
        </li>  
        总数量{{totalcount}} <br>
        总价格{{totalprice}}  
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        new Vue({
            el: "#box",
            data: {
                totalcount: 3,
                totalprice :600,
               goods: [
                   {
                       id : 1,
                       name : "小米",
                       price : 100,
                       count : 1,
                       subtotal: 100
                   },
                   {
                       id : 2,
                       name : "华为",
                       price : 200,
                       count : 1,
                       subtotal: 200
                   },
                   {
                       id : 3,
                       name : "苹果",
                       price : 300,
                       count : 1,
                       subtotal: 300
                   },
               ]
            },
            methods:{
                
                add(index){
                    index.count++
                    index.subtotal = index.count * index.price
                    this.totalcount=this.goods.reduce((prev,next) =>{
                        return prev + next.count
                    },0)
                    this.totalprice = this.goods.reduce((prev,next) =>{
                        return prev + next.subtotal
                    },0)
                    
                },
                reduce(index){
                    index.count--
                    index.subtotal = index.count * index.price
                if(index.count<1){
                    alert('数量小于1,确定要删除吗?')
                    this.goods.splice(index,1)
                }
                this.totalcount=this.goods.reduce((prev,next) =>{
                        return prev + next.count
                    },0)
                    this.totalprice = this.goods.reduce((prev,next) =>{
                        return prev + next.subtotal
                    },0)
                }
            }
        })

    </script>
</body>
</html>